<!--
 * @Descripttion: damage报损报溢新增
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2019-09-30 14:53:02
 -->
<template>
  <div>
    <el-button size="default" type="primary" @click="btnAddRole">添 加</el-button>
    <el-table
      ref="roleData"
      v-loading="tableLoading.role"
      :data="getTableData('role')"
      style="width: 100%"
      border
      @selection-change="onSelectionChange"
    >
      <el-table-column label="角色名称" width="100" prop="roleName" align="left" />
      <el-table-column label="备注" width="200" prop="remark" align="left" />
      <el-table-column label="创建时间" width="100" prop="model" align="left" />
      <el-table-column label="更新时间" width="100" prop="typeName" align="left" />
      <el-table-column label="是否默认" width="140" prop="unit" align="center" />
      <el-table-column label="操作" width="300" align="center" fixed="left">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="btnMenuPermission(scope.$index, scope.row)">菜单权限
          </el-button>
          <el-button size="mini" type="primary" @click="btnFunPermission(scope.$index, scope.row)">功能权限
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :loading="scope.$index === currentId"
            @click="btnDelete(scope.$index, scope.row)"
          >删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { listData } from '@/api/sys/role.js'
import { PermissionTree } from '@/views/sys-manager/permissions'
import RoleSave from './save'
import { updatePermissionsdata as updateRolePermissionsData,
  saveData as saveRoleData,
  delData as delRoleData } from '@/api/sys/role'

export default {
  name: 'RoleList',
  // eslint-disable-next-line vue/no-unused-components
  components: { PermissionTree },
  mixins: [oftenuse],
  props: {
  },
  data() {
    return {
      currentId: null
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.setTableData('role', [])
    this.listRoleData()
  },
  methods: {
    btnAddRole() {
      const h = this.$createElement
      const vNode = h(RoleSave)
      this.$msgbox({
        title: '角色管理',
        message: vNode,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            const compInstance = instance.$slots.default[0].componentInstance
            compInstance.handleValid('roleData').then(() => {
              compInstance.saveData().then(res => {
                this.listRoleData()
                instance.$slots.default = null
                done()
              })
            })
          } else {
            done()
          }
        }
      })
    },
    btnDelete(index, row) {
      this.isAllowDel().then(res => {
        this.currentId = index
        this.delRole([row.roleId]).then(res => {
          this.currentId = null
        })
      })
    },
    /**
     * 菜单权限
     */
    btnMenuPermission(index, row) {

    },
    /**
     * 功能权限
     */
    btnFunPermission(index, row) {
      const h = this.$createElement
      const vNode = h(PermissionTree, {
        props: { roleData: row }
      })
      this.$msgbox({
        title: '功能权限',
        message: vNode,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            const compInstance = instance.$slots.default[0].componentInstance
            const checkedData = compInstance.getCheckedNodes()
            this.updateRolePermissionsData(row.roleId, checkedData)
          }
          instance.$slots.default = null
          done()
        }
      })
    },
    // API
    /**
     * 添加角色
     */
    saveRole(roleObj) {
      saveRoleData(roleObj).then(res => {
        if (!res.data.flag) {
          return this.$notify.error({ title: '保存失败！', message: res.data.message || '' })
        } else {
          this.listRoleData()
          return this.$notify.success({ title: '保存成功！' })
        }
      }).catch(err => {
        this.$notify.error({ title: '保存异常！', message: err || '' })
      })
    },
    /**
     * 删除角色
     */
    delRole(roleIdArray) {
      return delRoleData(roleIdArray).then(res => {
        if (res.data.flag) {
          this.listRoleData()
          return this.$notify.success({ title: '删除成功！' })
        } else {
          return this.$notify.error({ title: '删除失败！', message: res.data.message || '' })
        }
      }).catch(err => {
        return this.$notify.error({ title: '删除异常！', message: err || '' })
      })
    },
    /**
     * 重置保存角色的permissions
     */
    updateRolePermissionsData(roleId, permissionsData) {
      const data = {
        sysRole: { roleId: roleId, roleName: 'sasa', rParent: 222 },
        permissionList: permissionsData
      }
      updateRolePermissionsData(data).then(res => {
        if (!res.data.flag) {
          return this.$notify.error({ title: '保存失败！', message: res.data.message || '' })
        } else {
          return this.$notify.success({ title: '保存成功！' })
        }
      }).catch(err => {
        this.$notify.error({ title: '保存异常！', message: err || '' })
      })
    },
    listRoleData(params) {
      this.setTableLoading('role', true)
      listData(params = { data: {}, pageInfo: this.pageInfo }).then(res => {
        this.setTableLoading('role', false)
        if (res.data.flag) this.setTableData('role', res.data.data)
      }).catch(err => {
        console.log(err)
        this.setTableLoading('role', false)
      })
    },
    // ON
    onSelectionChange(selectData) {
      this.setTableSelectionData('role', selectData)
    }
  }
}
</script>

<style scoped>
</style>
